<template>
    <view class="container">
        <image class="product-image" src="https://pic.imgdb.cn/item/669e65c0d9c307b7e9044379.png"></image>
        <view class="product-info">
            <text class="product-name">美味小饼</text>
            <text class="product-price">¥28.'00'</text>
            <button class="buy-button">购买</button>
            <view class="rating">
                <text>4.7分</text>
            </view>
        </view>
        <view class="shop-info">
            <text>店铺信息</text>
            <view>
                <text>地址: 呜呜嵩</text>
                <text>营业: 24小时</text>
                <text>开业: 2019年</text>
                <text>翻新: 2019年</text>
            </view>
        </view>
        <view class="reviews">
            <text>评论</text>
            <view class="review">
                <text class="review-text">
                    对于喜欢糕点的老朋友和女朋友来说，这是值得推荐的。热情周到的客服服务，独特的大块美味的糕点，外观别具一格。室内场馆设施齐全，待孩子放假过完节，应该订购此班项目。
                </text>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	
export default {
    data() {
        return {
            product: {
                name: '美味小饼',
                price: 28,
                rating: 4.7,
                reviews: [
                    {
                        text: '对于喜欢糕点的老朋友和女朋友来说，这是值得推荐的。热情周到的客服服务，独特的大块美味的糕点，外观别具一格。室内场馆设施齐全，待孩子放假过完节，应该订购此班项目。'
                    }
                ]
            }
        };
    },
    onLoad() {
        // Any initialization logic can go here
    },
    methods: {
        onBuyButtonClick() {
            uni.showToast({
                content: '购买功能尚未实现'
            });
        }
    }
};
</script>
<style>
.container {
    padding: 16px;
}

.product-image {
    width: 100%;
}

.product-info {
    margin-top: 16px;
}

.product-name {
    font-size: 24px;
    font-weight: bold;
}

.product-price {
    color: red;
    font-size: 20px;
}

.buy-button {
    background-color: #ff5000;
    color: white;
    padding: 8px;
    margin-top: 16px;
}

.rating {
    margin-top: 8px;
    font-size: 16px;
}

.shop-info,
.reviews {
    margin-top: 24px;
}

.review-text {
    margin-top: 8px;
}

</style>
